<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>不需要页面图片显示加载</title>
<style>
   html{
    background: gray;
   }
   #loading{
   z-index: 200;
   position: fixed;
   top: 50%;
   left: 50%;
   border:1px solid red;
}
#loading-screen {
   display: block;
   position: absolute;
   text-align: center;
   width: 60px;
   height: 60px;
   top: 50%;
   -webkit-transform: translate(-50%,-50%);
   transform: translate(-50%,-50%);
   left: 50%;
   background: white;
   border-radius: 5px;
   z-index: 500;
}
#canvas-font-wrap{
font-family: '微软雅黑';
position:relative;
height: 60px;
width:60px;
line-height: 60px;
text-align: center;
color: darkgray;
}
.font-center{
height: 48px;
width:48px;
border:2px solid rgb(223,223,223);
border-radius: 25px;
line-height:48px;
position: absolute;
left: 4px;
top:4px;
}

#loading-screen .vip-cvs {
   position: absolute;
   left: 0;
   top: 0;
   -webkit-transform: translate(-25%,-25%) scale(0.5);
   transform: translate(-25%,-25%) scale(0.5);
}


</style>
</head>
<body>
<div id="loading">
   <div id='loading-screen'>
    <div id="canvas-font-wrap"style="">
    <div class="font-center" style="">cpp</div>
    </div>
       <canvas class='vip-cvs' width='200' height='200' id="canvas"></canvas>
   </div>
</div>
<!--//js路径更改自己的路径-->
<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
<!--js路径更改自己的路径-->
<script type="text/javascript" src="../js/loadAnimation.js" ></script>
<script type="text/javascript">
showLoadingScreen();
//页面加载打圈的js写法：
/**
 * Created by chenxiaopeng on 2016/10/13.
 */
var loadingHandel = null;
function initLoadingAnimate() {
    var step = 0;
    var bg = $('.vip-cvs')[0];
    var ctx = bg.getContext('2d');
    var imd = null;
    var circ = Math.PI * 2;
    var quart = Math.PI / 2;
    var lineColor = '#e5007f';
    var backforward = true;


    ctx.clearRect(0, 0, 200, 200);
    ctx.beginPath();
    ctx.strokeStyle = lineColor;
    ctx.lineCap = 'square';
    ctx.closePath();
    ctx.fill();
    ctx.lineWidth = 2.8;
    imd = ctx.getImageData(0, 0, 200, 200);
    
    var draw = function(current) {
        ctx.putImageData(imd,0,0,0,0,200,200);
        ctx.beginPath();
        ctx.arc(60, 60, 50, -(quart), ((circ) * current) - quart, backforward);
        ctx.stroke();
    }


    function stepDraw() {
    //draw(0.5);
        step += 0.01;
        draw(step);
        if (step >= 0.99) {
            step = 0;
            if (!backforward) {
                backforward = true;
            } else {
                backforward = false;
            }
        }
    }


    loadingHandel = setInterval(stepDraw, 10);
}


function clearLoadingAnimation() {
    clearInterval(loadingHandel);
}


function showLoadingScreen() {
    initLoadingAnimate();
    $('#loading').show();
}


function hideLoadingScreen() {
    clearLoadingAnimation();
    $('#loading').hide();
}
</script>
</body>
</html>